<template>
  <div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      class="one"
      :style="{width:pagesStore.sizeNum + 'px',height:pagesStore.sizeNum + 'px'}"
    >
      <g clip-path="url(#clip-path-104_4424)">
        <path
          d="M7 16C10.866 16 14 12.866 14 9C14 5.13401 10.866 2 7 2C3.13401 2 0 5.13401 0 9C0 12.866 3.13401 16 7 16ZM10.816 13.892L8.836 13.892L7.012 10.532L5.776 10.532L5.776 13.892L4 13.892L4 5L7.084 5C8.956 5 10.432 5.66 10.432 7.7C10.432 9.032 9.76 9.86 8.74 10.256L10.816 13.892ZM5.776 6.416L5.776 9.128L6.928 9.128C8.068 9.128 8.692 8.648 8.692 7.7C8.692 6.74 8.068 6.416 6.928 6.416L5.776 6.416Z"
          fill-rule="evenodd"
          :fill="!theme.includes('2e3c56')? '#224477' : '#fff'"
        ></path>
        <circle
          cx="12.9990234375"
          cy="2.99951171875"
          r="3"
          stroke="rgba(226, 233, 251, 1)"
          stroke-width="1"
          fill="#67C23A"
        ></circle>
      </g>
      <defs>
        <clipPath id="clip-path-104_4424">
          <path d="M0 16L16 16L16 0L0 0L0 16Z" fill="white" />
        </clipPath>
      </defs>
    </svg>
  </div>
</template>

<script setup>
import useSettingsStore from "@/store/modules/settings";
import usePagesStore from '@/store/modules/pages'
const pagesStore = usePagesStore()

const settingsStore = useSettingsStore();
const topTheme = computed(() => settingsStore.topTheme);
const theme = computed(() => settingsStore.theme);
const topNav = computed(() => settingsStore.topNav);

defineProps({
  isActive: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits();
</script>

<style scoped>
.one{
  display: inline-block;
  vertical-align: middle;
}</style>
